<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>
    
    <div>firstName: {{ firstName }}</div>
    <div>lastName: {{ lastName }}</div>
    <input type="text" v-model="fullname">
    <div>fullname: {{ fullname }}</div>
    
    


  </div>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {
    const firstName = ref('尼古拉斯')
    const lastName = ref('葛晨')
    
    // 函数写法  只有get没有set
    // const fullname = computed(()=> {
    //   return firstName.value + '-' + lastName.value
    // })


    // 对象写法  有get和set
    const fullname = computed({
      get() {
        return firstName.value + '-' +lastName.value
      },
      set(val) {
        console.log(val);
        firstName.value = val.split('-')[0]
        lastName.value = val.split('-')[1]
        // console.log(firstName.value);
        // console.log(lastName.value);
      }
    })


    return {
      firstName,
      lastName,
      fullname
    }
    }

   
  
}
</script>

<style scoped >

</style>